<template>
    <div>
        <h1>3.$nextTick 使用</h1>
        <p id="op" ref="op">111</p>
    </div>
</template>

<script>
    export default {
        props: {

        },
        data() {
            return {

            };
        },
        created() {
            //console.log(this.$refs.op)   //undefined 在挂在阶段之前，我们是拿不到dom标签上及其数据的

            // $nextTick 可以解决在挂载之前获取不到挂载后的数据问题，实际上就是等mounted执行后在执行回调函数..
            // 1.$nextTick 回调函数写法
            // this.$nextTick(()=>{
            //     console.log(this.$refs.op)
            // })

            // 2.promise写法
            this.$nextTick().then(()=>{
                console.log(this.$refs.op)
            }) 
        },
        mounted() {
            console.log('执行了mounted')
        }
    };
</script>

<style scoped lang="less">

</style>